<template>
  <div class="wrapper">
    <header>
      <p>商家注册</p>
    </header>

    <ul class="form-box">
      <li>
        <div class="title">商家名称</div>
        <div class="content"><input v-model.trim="business.businessName" placeholder="请输入商家名称" /></div>
      </li>
      <li>
        <div class="title">商家地址</div>
        <div class="content"><input v-model.trim="business.businessAddress" placeholder="请输入商家地址" /></div>
      </li>

      <li class="cat-title">选择分类</li>
      <li class="cat-grid">
        <div v-for="c in foodTypeList" :key="c.id" class="cat-item" :class="{ active: business.category === c.label }"
          @click="business.category = c.label" title="点击选择分类">
          <img :src="c.img" :alt="c.label" />
          <span>{{ c.label }}</span>
        </div>
      </li>

      <li>
        <div class="title">起送价(元)</div>
        <div class="content"><input v-model.number="business.startPrice" type="number" step="0.01" placeholder="如 20" />
        </div>
      </li>
      <li>
        <div class="title">配送费(元)</div>
        <div class="content"><input v-model.number="business.deliveryPrice" type="number" step="0.01"
            placeholder="如 3" /></div>
      </li>
      <li>
        <div class="title">店铺Logo</div>
        <div class="content"><input v-model.trim="business.businessImg" placeholder="图片URL（可选）" /></div>
      </li>
    </ul>

    <div class="actions">
      <button class="btn-primary" @click="submit" :disabled="submitting">{{ submitting ? '提交中...' : '提交注册' }}</button>
      <button class="btn-plain" @click="$router.back()">返回</button>
    </div>

    <Footer />
  </div>
</template>

<script>
import Footer from '../components/Footer.vue'
export default {
  name: 'BusinessRegister',
  components: { Footer },
  data() {
    return {
      submitting: false,
      business: {
        businessName: '',
        businessAddress: '',
        category: '',
        startPrice: null,
        deliveryPrice: null,
        businessImg: '',
      },
      // 注册种类使用你提供的清单
      foodTypeList: [
        { id: 1, img: require('../assets/dcfl09.png'), label: '中餐' },
        { id: 2, img: require('../assets/dcfl04.png'), label: '快餐' },
        { id: 3, img: require('../assets/dcfl08.png'), label: '韩餐' },
        { id: 4, img: require('../assets/烧烤-烤串.png'), label: '烧烤' },
        { id: 5, img: require('../assets/dcfl05.png'), label: '饮品' },
        { id: 6, img: require('../assets/dcfl12.png'), label: '火锅' },
        { id: 7, img: require('../assets/中餐-剁椒鱼头.png'), label: '川菜' },
        { id: 8, img: require('../assets/dcfl08.png'), label: '湘菜' },
        { id: 9, img: require('../assets/中餐-龙井虾仁.png'), label: '粤菜' },
        { id: 10, img: require('../assets/中餐-九转大肠.png'), label: '东北菜' },
        { id: 11, img: require('../assets/icons8-食品和葡萄酒-100.png'), label: '西餐' },
        { id: 12, img: require('../assets/icons8-美食-85.png'), label: '日料' },
        { id: 13, img: require('../assets/icons8-素食食品-50.png'), label: '轻食沙拉' },
        { id: 14, img: require('../assets/素食.jpg'), label: '素食' },
        { id: 15, img: require('../assets/icons8-美食-64.png'), label: '面包甜点' },
      ]
    }
  },
  methods: {
    async submit() {
      const b = this.business
      if (!b.businessName) return alert('请填写商家名称')
      if (!b.businessAddress) return alert('请填写商家地址')
      if (!b.category) return alert('请选择分类')
      if (b.startPrice == null || b.startPrice < 0) return alert('请填写有效起送价')
      if (b.deliveryPrice == null || b.deliveryPrice < 0) return alert('请填写有效配送费')

      const userId = this.$route.query.userId || sessionStorage.getItem('userId')
      if (!userId) return alert('请先登录')

      const type = this.foodTypeList.find(it => it.label === b.category)
      if (!type) return alert('请选择分类')

      const payload = {
        businessName: b.businessName,
        businessAddress: b.businessAddress,
        phone: b.phone,
        orderTypeId: type.id, // 只传ID
        startPrice: Number(b.startPrice),
        deliveryPrice: Number(b.deliveryPrice),
        businessImg: b.businessImg || undefined,
        businessExplain: b.businessExplain || undefined,
        businessOwner: { id: Number(userId) }
      }

      this.submitting = true
      try {
        const res = await this.$axios.post('/businesses', payload)
        const ok = res?.data?.success !== false
        alert(ok ? '注册成功' : (res?.data?.message || '注册失败'))
        if (ok) this.$router.push('/business-login')
      } catch (e) {
        console.error(e)
        alert(e?.response?.data?.message || '提交失败，请稍后重试')
      } finally {
        this.submitting = false
      }
      this.$router.back()
    }
  }
}
</script>

<style scoped>
.wrapper {
  width: 100%;
  min-height: 100vh;
  background: #f7f8fa;
  padding-bottom: 16vw;
}

header {
  width: 100%;
  height: 12vw;
  background: #0097FF;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

header p {
  font-size: 5vw;
  font-weight: 700;
  margin: 0;
}

.form-box {
  list-style: none;
  margin: 0;
  padding: 4vw;
}

.form-box li {
  display: flex;
  align-items: center;
  padding: 2.5vw 0;
}

.form-box .title {
  width: 26vw;
  color: #666;
  font-size: 3.6vw;
}

.form-box .content {
  flex: 1;
}

input,
textarea,
select {
  width: 100%;
  box-sizing: border-box;
  padding: 2.6vw 3vw;
  border: 1px solid #eee;
  border-radius: 2vw;
  font-size: 3.6vw;
  background: #fff;
}

.textarea .content textarea {
  resize: vertical;
}

.cat-title {
  font-size: 3.8vw;
  color: #666;
  padding-top: 4vw;
}

.cat-grid {
  flex-wrap: wrap;
  gap: 3vw;
}

.cat-grid .cat-item {
  width: 20vw;
  height: 24vw;
  border: 1px solid #eee;
  border-radius: 3vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  cursor: pointer;
}

.cat-grid .cat-item img {
  width: 10vw;
  height: 10vw;
  object-fit: cover;
}

.cat-grid .cat-item span {
  margin-top: 1.5vw;
  font-size: 3.3vw;
  color: #333;
}

.cat-grid .cat-item.active {
  border-color: #0097FF;
  box-shadow: 0 0 0 2px rgba(0, 151, 255, .15) inset;
}

.actions {
  padding: 0 4vw 4vw;
  display: flex;
  gap: 3vw;
}

.btn-primary {
  flex: 1;
  height: 10vw;
  border: none;
  border-radius: 2vw;
  background: #0097FF;
  color: #fff;
  font-size: 3.8vw;
}

.btn-plain {
  width: 28vw;
  height: 10vw;
  border: 1px solid #ddd;
  border-radius: 2vw;
  background: #fff;
  color: #333;
  font-size: 3.8vw;
}
</style>